<template>
  <div>
    <el-card>
      <el-form :inline="true">
        <el-form-item>
          <el-input placeholder="请输入用户名" v-model="username">
            <el-button slot="append" icon="el-icon-search" @click='search'></el-button>
          </el-input>
        </el-form-item>
        <el-form-item> </el-form-item>
      </el-form>
      <!-- 列表 -->
      <el-table :data="list" style="width: 100%" border>
        <el-table-column label="ID" width="60px">
          <template slot-scope="scope">
            <span>{{ scope.row.order_id }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="order_number" label="订单编号"></el-table-column>
        <el-table-column prop="order_price" label="订单价格"></el-table-column>
        <el-table-column label="是否付款">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.is_send == '是'"
              type="primary"
              size="mini"
              >已付款</el-button
            >
            <el-button v-else type="danger" size="mini">未付款</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="is_send" label="付款方式">
          <template slot-scope="scope">
            <el-button
              type="danger"
              v-if="scope.row.order_pay == '0'"
              size="mini"
              >未支付</el-button
            >
            <el-button
              type="danger"
              v-if="scope.row.order_pay == '1'"
              size="mini"
              >支付宝</el-button
            >
            <el-button
              type="danger"
              v-if="scope.row.order_pay == '2'"
              size="mini"
            >
              微信
            </el-button>
            <el-button
              type="danger"
              v-if="scope.row.order_pay == '3'"
              size="mini"
              >银行卡</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="is_send" label="是否发货" width="80px">
        </el-table-column>
        <el-table-column label="下单时间"> {{ time }}</el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-button
              icon="el-icon-edit"
              type="primary"
              size="mini"
              @click='ClickEdit(scope.row)'
            ></el-button>
            <el-button
              icon="el-icon-location"
              type="success"
              size="mini"
              @click="findS(scope.row.user_id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="changeSize"
        @current-change="changeNum"
        :page-sizes="[4, 8]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
        <!-- 物流信息 -->
      </el-pagination>
      <el-dialog title="提示" :visible.sync="Times" width="70%">
        <el-timeline>
          <el-timeline-item
            v-for="(item, index) in times"
            :key="index"
            :timestamp="item.time"
            placement="top"
            color="red"
          >
            <el-card>
              <h4>{{ item.context }}</h4>
            </el-card>
          </el-timeline-item>
        </el-timeline>
        <span slot="footer" class="dialog-footer">
          <el-button @click="Times = false">取 消</el-button>
          <el-button type="primary" @click="Times = false">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改地址 -->
      <el-dialog title="修改" :visible.sync="editstatus">
        <el-form :model="editlist">
          <el-form-item label="是否发货" :label-width="formLabelWidth">
            <el-input v-model="editlist.is_send" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="订单支付" :label-width="formLabelWidth">
            <el-input v-model="editlist.order_pay" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="订单价格" :label-width="formLabelWidth">
            <el-input v-model="editlist.order_price" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="支付状态" :label-width="formLabelWidth">
            <el-input v-model="editlist.order_status" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editstatus = false">取 消</el-button>
          <el-button type="primary" @click="EditSure"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
// 列表
import { oder } from "@/axios/https";
// 快递
import { oder_address } from "@/axios/https";
// 修改状态
import { oder_editStatus } from "@/axios/https";
// 查找状态
import { oder_searchStatus } from "@/axios/https";
export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      username: "",
      pagenum: 1,
      pagesize: 4,
      total: 0,
      list: [],
      time: "2020-11-11 00:00:00",
      times: [],
      Times: false,
      // 修改
      editstatus:false,
      formLabelWidth:'100px',
      editlist:{
        id:'',
        is_send:'',
        order_pay:'',
        order_price:'',
        pay_status:'',
      }
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getOderList();
  },
  methods: {
    async getOderList() {
      const { data: res } = await oder(
        `/orders/?query=${this.username}&pagenum=${this.pagenum}&pagesize=${this.pagesize}`
      );
      if (res.meta.status !== 200) return this.$message.error("信息获取失败");
      console.log(res);
      this.list = res.data.goods;
      // 总页数
      this.total = res.data.total;
    },
    // 分页
    changeSize(val) {
      //   console.log(val);
      this.pagesize = val;
      this.getOderList();
    },
    changeNum(val) {
      this.pagenum = val;
      //   console.log(val)
      this.getOderList();
    },
    // 地址
    async findS(id) {
      this.Times = true;
      const { data: res } = await oder_address("/kuaidi/"+id);
      console.log(res);
      if (res.meta.status !== 200)
      return this.$message.error("物流信息获取失败");
      this.$message.success(res.meta.message);
      this.times = res.data;
    },
    // 修改
    ClickEdit(data){
      this.editstatus = true;
      this.editlist.id = data.order_id
      this.editlist.is_send = data.is_send
      this.editlist.order_pay = data.order_pay
      this.editlist.order_price = data.order_price
      this.editlist.order_status = data.is_send
    },
    async EditSure(){
      const {data:res} = await oder_editStatus('orders/'+this.editlist.id,this.editlist)
      // console.log(res)
    },
    // 搜索
    async search(){
      const {data:res} = await oder_searchStatus('orders/'+this.list.id)
      // console.log(res)
    }
  },
};
</script>
<style scoped>
</style>